<template>
  <div>
    <myHeader :title=" 'tabbar案例'" :bgc=" '#0094ff' " :color=" '#fff' "></myHeader>
    <div class="main">
      <list :arr="dataArr" v-if="currentTab == 0">
        <template #title>
          <th>#</th>
          <th>商品名称</th>
          <th>价格</th>
          <th>标签</th>
          <th>操作</th>
        </template>
        <template v-slot:Tbody="{itemDate:item,myindex:index}">
          <td>{{item.id}}</td>
          <td>{{item.goods_name}}</td>
          <td>{{item.goods_price}}</td>
          <td>
            <input
              v-focus
              type="text"
              ref="inp"
              v-model="item.inputValue"
              v-if="item.inputVisible"
              @keyup.esc="onEsc(item)"
              @keyup.enter="onBlur(item)"
              @blur="onBlur(item)"
            />
            <button v-else class="btn btn-primary btn-sm add-tag" @click="onTagcheck(item)">+tag</button>
            <span class="badge badge-warning" v-for="(v,i) in  item.tags" :key="i">{{v}}</span>
          </td>
          <td>
            <button class="btn btn-danger btn-sm" @click="onDel(index)">删除</button>
          </td>
        </template>
      </list>
      <sourch v-else-if="currentTab == 1"></sourch>
      <info v-else></info>
    </div>
    <myTabbar @oncheck="checkTab" :arr=" tabList "></myTabbar>
  </div>
</template>
<script>
import myHeader from "./components/myHeader";
import myTabbar from "./components/myTabbar";
import info from "./view/info";
import sourch from "./view/sourch";
import list from "./view/list";
export default {
  components: {
    myHeader,
    myTabbar,
    sourch,
    info,
    list
  },
  data() {
    return {
      currentTab: 0,
      tabList: [
        {
          iconText: "icon-shangpinliebiao",
          text: "商品列表",
          componentName: "MyGoodsList"
        },
        {
          iconText: "icon-sousuo",
          text: "商品搜索",
          componentName: "MyGoodsSearch"
        },
        {
          iconText: "icon-user",
          text: "我的信息",
          componentName: "MyUserInfo"
        }
      ],
      dataArr: []
    };
  },
  methods: {
    checkTab(i) {
      this.currentTab = i;
    },
    onDel(i) {
      this.dataArr.splice(i, 1);
    },
    onTagcheck(i) {
      i.inputVisible = true;
    },
    onEsc(e) {
      e.inputValue = "";
    },
    onBlur(e) {
      e.tags.push(e.inputValue);
      e.inputValue = "";
    }
  },
  directives: {
    focus: {
      inserted(dom) {
        dom.focus();
      }
    }
  },
  created() {
    this.$({
      url: "/api/goods"
    }).then(res => {
      console.log(res);
      if (res.status == 200) {
        let { data } = res.data;
        this.dataArr = data;
      }
    });
  },
  mounted() {}
};
</script>

<style scoped>
.main {
  padding: 45px 0 50px 0;
}
</style>